@import '../../variables';

.sidebar {
	position: absolute;
	margin-top: 65px;
	width: calc(4 / 24 * @container-lg + (100% - @container-lg) / 2 + 10px);

	.nav > li {
		& + li {
			margin-top: 0;
		}

		> a {
			color: #072836;
			padding: 15px 0 15px calc(100% - (3 / 24 * @container-lg + 10px));

			&:hover:not(.active) {
				color: #eb4c36;
				background-color: #ffefb2;
			}

			&.active {
				background-color: #ffc900;

				&:after {
					left: 100%;
					top: 0;
					border: 25px solid transparent;
					content: ' ';
					height: 0;
					width: 0;
					position: absolute;
					border-left: 15px solid #e4b507;
				}
			}
		}
	}

	@media (max-width: @screen-md-max) {
		width: calc(4 / 24 * @container-md + (100% - @container-md) / 2 + 10px);

		.nav > li > a {
			padding-left: calc(100% - (3 / 24 * @container-md + 10px));
		}
	}

	@media (max-width: @screen-sm-max) {
		width: calc(4 / 24 * @container-sm + (100% - @container-sm) / 2 + 10px);

		.nav > li > a {
			padding-left: calc(100% - (4 / 24 * @container-sm + 10px));
		}
	}

	@media (max-width: @screen-xs-max) {
		width: calc(6 / 24 * (100% - 20px) + 10px);

		.nav > li > a {
			// @container-xs = ((100% - 10px) / 6 * 24)
			padding-left: calc(100% - (5 / 24 * ((100% - 10px) / 6 * 24) + 10px));
		}
	}
}
